<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <PageTools>
            <!-- 插入到left插槽位置 -->
            <template #left>
              <span>总记录数：100条</span>
            </template>
            <!-- 插入到right插槽位置 -->
            <template #right>
              <el-button
                type="warning"
                size="small"
                @click="$router.push('/import')"
              >
                导入excel
              </el-button>
              <el-button
                type="danger"
                size="small"
                :loading="downloadLoading"
                @click="exportExcel"
              >
                导出excel
              </el-button>
              <el-button type="primary" size="small" @click="showDialog = true">
                新增员工
              </el-button>
            </template>
          </PageTools>
        </div>
        <div>
          <!-- table列表 -->
          <el-table
            border
            :data="list"
            :default-sort="{ prop: 'workNumber', order: 'descending' }"
          >
            <el-table-column type="index" label="序号" />
            <el-table-column prop="username" label="图片">
              <template #default="{ row }">
                <el-image
                  :src="row.staffPhoto"
                  fit="fill"
                  :lazy="true"
                  class="roundImg"
                  @click="openQRDialog(row.staffPhoto)"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="workNumber" label="工号" />
            <el-table-column prop="formOfEmployment" label="聘用形式">
              <!-- 使用默认作用域插槽难道当前行数据 自定义格式化聘用形式 -->
              <template #default="{ row }">
                {{ formatForm(row.formOfEmployment) }}
              </template>
            </el-table-column>
            <el-table-column prop="departmentName" label="部门" />
            <el-table-column prop="correctionTime" sortable label="入职时间" />
            <el-table-column label="账户状态">
              <el-switch v-model="qy" />
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="280">
              <template #default="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push(`/employees/detail/${row.id}`)"
                  >查看</el-button
                >
                <el-button type="text" size="small" @click="assignRole(row.id)">
                  分配角色
                </el-button>
                <el-button type="text" size="small" @click="delEmployee(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              background
              :current-page="query.page"
              :page-size="query.size"
              :page-sizes="pageSizes"
              :total="totalPage"
              layout="prev, pager, next,sizes"
              @current-change="changePage"
              @size-change="sizeChange"
            />
          </el-row>
        </div>
      </el-card>
    </div>
    <!-- 添加员工弹层 -->
    <AddEmployee :show-dialog.sync="showDialog"></AddEmployee>
    <!-- 分配员工弹层 -->
    <AssignRole
      ref="assignRole"
      :show-role-dialog.sync="showRoleDialog"
    ></AssignRole>
    <!-- 加载QRcode的dialog弹层 -->
    <el-dialog title="图片二维码" :visible.sync="showQRDialog" width="30%">
      <el-row type="flex" justify="center">
        <canvas ref="qrCanvas" class="qrCanvas"></canvas>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import QrCode from 'qrcode'
import { getEmployeeList, delEmployeeById } from '@/api/employee.js'
import EnumerationEmployee from '@/api/constant/employees.js'
import AddEmployee from './components/add-employee.vue'
import AssignRole from './components/assign-role.vue'
export default {
  name: 'EmployeeIndex',
  components: {
    AddEmployee,
    AssignRole
  },
  data () {
    return {
      // 展示二维码的dialog
      showQRDialog: false,
      // 导出Excel加载
      downloadLoading: false,
      // 控制分配员工组件的dialog
      showRoleDialog: false,
      // 控制添加员工组件的dialog
      showDialog: false,
      // 员工列表
      list: [],
      // 员工接口分页查询参数
      query: {
        page: 1, // 当前页
        size: 10 // 每页条数
      },
      // 每页显示多少条
      pageSizes: [10, 5, 2],
      // 总条数
      totalPage: 0,
      // el-switch组件显示
      qy: true
    }
  },
  created () {
    this.getEmployeeList()
  },
  methods: {
    // 展示QRcode弹层
    async openQRDialog (url) {
      if (!url) false
      this.showQRDialog = true
      await this.$nextTick() // 等待DOM元素异步渲染完成
      QrCode.toCanvas(this.$refs.qrCanvas, url)
    },
    // 导出数据下载为Excel文件
    async exportExcel () {
      this.downloadLoading = true
      // import() 什么时候正式要使用导出功能了,插件才会被正式引入到应用里=>需要script-loader支持
      const excel = await import('@/vendor/Export2Excel')// 使用懒加载的方式
      // 导出数据key对应关系
      const headerShips = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '工号': 'workNumber',
        '转正日期': 'correctionTime',
        '部门': 'departmentName'
      }
      const header = Object.keys(headerShips)
      const enHeader = Object.values(headerShips)
      // console.log(header, enHeader)
      // 定义一个方法 把要导出的list数据转换成二维数组===>通过enHearder筛选导出的键
      const data = this.transformTwoAry(this.list, enHeader)
      // console.log('二维数组', data)
      excel.export_json_to_excel({
        // 表头 必填
        header,
        // 表头对应的具体数据 必填
        // data: [
        //   ['刘备', 100],
        //   ['关羽', 500],
        //   ['李白', 0.01, 100]
        // ],
        data,
        filename: `excel-list-${+new Date()}`, // 导出下载的文件名称
        autoWidth: true, // 导出excel列宽度是否自适应
        bookType: 'xlsx' // 导出生成的文件类型
      })
      this.downloadLoading = false
    },
    /**
     * 把[{},{}] 转换为二维数组 [[],[]]
     */
    transformTwoAry (list, enHeader) {
      // 定义一个二维数组
      const newList = []
      list.forEach(userObj => {
        // 定义子数组来保存对象里的值
        const sonList = []
        // 遍历对象userObj
        for (const key in userObj) {
          // 根据enHeader数组的关系把有的保存起来
          if (enHeader.includes(key)) { // 过虑要导出的key
            // 格式化聘用形式
            if (key === 'formOfEmployment') {
              // 调用格式化方法再添加到数组
              sonList.push(this.formatForm(userObj[key]))
            } else {
              // 找到了要导出的对应的键===>导出值
              sonList.push(userObj[key])
            }
          }
        }
        // 把子数组添加到父数组中
        newList.push(sonList)
      })
      // 把数组返回
      return newList
    },
    // 分配角色按钮
    assignRole (id) {
      this.showRoleDialog = true
      // 调用子组件的回显方法
      this.$refs.assignRole.getUserDetailById(id)
    },
    // 格式化聘用形式
    formatForm (id) {
      /**
       *通过映射的方式===> 尽量定义成对象  因为对象天生具有一一对应的属性
       遍历数组拿到id当做key
       */
      const map = {}
      EnumerationEmployee.hireType.forEach(obj => {
        // 把obj的id属性当做map的键 把obj的value属性当做对应的 值
        map[obj.id] = obj.value
      })
      // 根据映射关系 把传过来当id当做唯一键
      return map[id]
    },

    // 获取员工列表
    async getEmployeeList () {
      const { rows, total } = await getEmployeeList(this.query)
      this.list = rows
      this.totalPage = total
    },
    /**
     * 根据id删除员工
     * 捕获错误
     * 1.敏感操作 确认弹窗
     * 2.删除接口
     * 3.刷新列表数据 ===> 让页码初始化1 ===>能避免一些错误===>每页最后一条数据页码减少了,但是后台请求还是当前删除页的数据,就会导致减少到当前页面的数据为空
     * 4.成功提示
     */
    async delEmployee (row) {
      try {
        await this.$confirm(`确认删除${row.username}吗?`, '温馨提示') // 返回promise对象 也可用.then(res=>{}).catch(err=>{})
        await delEmployeeById(row.id)

        /**
         * 页码
         * this.query.page = 1  注册这个就会出现下列情况
         * 原因:当每次最后也一页的最后一条数据删完时 页面会减少一页 但是获取列表请求的页码还是当前删除的页码 ===>导致数据显示出错
         * 解决:
         * 每次删除一次就计算一次当前的页数 ===>更新一下this.query.page(当前页)===>再调接口 刷新列表
         * 当前页码= (总条数-1) / 每页显示的条数
         */
        const lastNewPage = Math.ceil((this.totalPage - 1) / this.query.size) // 出现小数 页码是要往上取整
        // 判断只有是最后一页才这样赋值 不然出现bug:每次删除都会跳到最后
        // 当 当前页大于 最新的最后页才重新计算当前页码
        if (this.query.page > lastNewPage) {
          this.query.page = lastNewPage
        }
        // 刷新列表
        this.getEmployeeList()
        // 提示
        this.$message.success(`删除${row.username}成功!`)
      } catch (error) {
        console.log(error)
      }
    },
    // 页码改变
    changePage (currPage) {
      // console.log(currPage)
      this.query.page = currPage
      // 重新调接口获取员工列表
      this.getEmployeeList()
    },
    // 每页显示条数改变
    sizeChange (currSize) {
      // console.log(currSize)
      this.query.size = currSize

      // 重新调接口获取员工列表
      this.getEmployeeList()
    }
  }
}
</script>

<style lang="scss" scoped>
// .roundImg {
//   width: 100px;
//   height: 100px;
//   border-radius: 50%;
// }
</style>

